<template>
  <div class="target-wrapper">
    <Wrap>
      <div slot="main_wrap">
        <avue-crud ref="crud"
            :data="tableData"
            class="target-table"
            :permission="permissionList"
            :table-loading="tableLoading"
            :option="tableOption"
            @on-load="getList"
            @refresh-change="refreshChange"
            @select="select"
            @search-change="searchChange">
        </avue-crud>
        <div class="chart-border">
             <v-chart :options="chartParams4" :watchShallow="true" :auto-resize="true" :style="{'width': '100%', 'height': '100%'}" />
        </div>
      </div>
    </Wrap>
  </div>
</template>

<script type="text/ecmascript-6">
import Wrap from '@/components/energy-wrap'
import {getCurrentDate} from '@/util/date'
import { quotaIndex } from '@/api/energy/energy'
const option1 = {
    color: ['#588dd5', '#639871'],
    legend: {
        data: [],
        textStyle: {
        color: '#fff'
        },
    },
    tooltip: {
    trigger: 'axis',
    axisPointer: {
        type: 'shadow'
    }
    },
    xAxis: [
        {
            type: 'category',
            data: [],
            axisPointer: {
                type: 'shadow'
            },
            axisLine: {
            show: false,
            },
            axisTick: {
            show:false
            },
            axisLabel: {
            show: true,
            color: '#fff'
            },
        }
    ],
    yAxis: [
        {
            type: 'value',
            nameTextStyle: {
                color: '#fff'
            },
            axisLine: {
                show: true,
                lineStyle:{
                    color: '#008acd',
                    width: 2
                }
            },
            axisLabel: {
                color: '#fff',
                formatter: '{value}'
            },
            axisTick: {
                show:false
            },
            splitLine: {
                show:true,
                lineStyle: {
                    color: '#0c324a'
                }
            },
        },
        {
            type: 'value',
            name: '',
            axisLine: {
                show: true,
                lineStyle:{
                    color: '#008acd',
                    width: 2
                }
            },
            axisLabel: {
                color: '#fff',
                formatter: '{value}'
            },
            axisTick: {
                show:false
            },
            splitLine: {
                show:false
            },
        }
    ],
    series: [
       
    ]
}
export default {
  components: {
    Wrap
  },
  data () {
    return {
      tableOption: {
        "border": true,
        "index": true,
        "indexLabel": "序号",
        "stripe": true,
        "menuAlign": "center",
        "align": "center",
        selection: true,
        "dialogClickModal": false,
        "searchMenuSpan": 6,
        searchShow: true,
        menu: false,
        "column": []
        },
    column: [
        {
        "type": "select",
        "label": "项目名称",
        width: 140,
        search: true,
         dicData: [
            {
            label: '广东省税务局',
            value: '0'
            }
        ],
        searchValue: '0',
        "prop": "projectName",
        "span": 12
        },	  {
        "type": "input",
        "label": "能耗指标名称",
        "prop": "indexName",
        width: 170,
        "span": 12
        },	  {
        "type": "input",
        "label": "指标单位",
        width: 150,
        "prop": "unit",
        "span": 12
        },	  {
        "type": "month",
        "label": "按用能年份",
        search: true,
        hide: true,
        valueFormat: 'yyyy-MM',
        format: 'yyyy-MM',
        searchLabelWidth: 150,
        showColumn: false,
        "prop": "date",
        searchPlaceholder: getCurrentDate('month'),
        "span": 12
        }  ],
      chartParams4: {},
      searchForm: {},
      tableData: [],
      page: {
          total: 0, // 总页数
          currentPage: 1, // 当前页数
          pageSize: 20 // 每页显示多少条
      },
      tableLoading: false
    }
  },
  computed: {
      permissionList() {
          return {
              addBtn: false,
              delBtn: false,
              editBtn: false
          };
      }
  },
  created() {
    //  this.chartParams4  = option1
  },
  methods: {
      select(selection,row) {
          let self = this
          if (selection.length === 3) {
            this.$alert('对比数据最多选择两项！', '提示', {
                confirmButtonText: '确定',
                callback: action => {
                    self.$refs.crud.toggleSelection([selection.pop()])
                }
            });
            return
          }
          option1.legend.data = []
          option1.series = []
          selection.map((item, index) => {
              let xdata = []
              option1.legend.data.push(item.indexName)
              item.listData.map(citem => {
                  xdata.push(citem.year + '年' + citem.month + '月')
              })
              option1.xAxis[0].data = xdata
          })
          if (selection.length > 0) {
                option1.series[0] = {
                    name: selection[0].indexName,
                    type: 'bar',
                    data: selection[0].listData.map(item => {
                        return item.value
                    })
                }
                if (selection.length > 1) {
                    option1.series[1] =  {
                        name: selection[1].indexName,
                        type: 'line',
                        yAxisIndex: 1,
                        symbolSize: 6,
                        lineStyle: {
                            width: 3
                        },
                        smooth: true,
                        data: selection[1].listData.map(item => {
                            return item.value
                        })
                    }
                }
          }
          console.log(option1)
          this.chartParams4 = Object.assign({}, option1)
      },
      getList(page, params) {
          let self = this
          this.tableLoading = true
        //   quotaIndex(Object.assign({
        //       date: '2022-04-05'
        //   }, params, this.searchForm )).then(response => {
        let date = this.searchForm.date ? this.searchForm.date : getCurrentDate('month')
          quotaIndex(date).then(response => {
              self.tableOption.column = Object.assign([], self.column)
              response.data.data.length > 0 && response.data.data[0].listData.map((item, index) => {
                  self.tableOption.column.push(
                      {
                        "type": "input",
                        "label": item.year + '年' + item.month + '月',
                        "prop": "value" + index,
                        "span": 12,
                        width: 105
                    }
                  )
                  response.data.data[0]['value'+index] = item.value
              })
              response.data.data.map(item => {
                  item.listData.map((citem, index) => {
                      item['value'+ index] = citem.value
                  })
              })
              self.tableOption.column.push(
                {
                    "type": "input",
                    "label": '合计',
                    "prop": "summation",
                    "span": 12,
                    width: 105
                }
            )
              this.tableData = response.data.data
              this.tableLoading = false
          }).catch(() => {
              this.tableLoading=false
          })
      },
      searchChange(form, done) {
          this.searchForm = form
          this.page.currentPage = 1
          this.getList(this.page, form)
          done()
      },
      refreshChange() {
          this.getList(this.page)
      }
  }
}
</script>

<style lang="scss">
.target-wrapper{
    .chart-border{
        margin-top: 30px;
        height: 440px;
    }
}
.target-table{
    ::-webkit-scrollbar:horizontal{
        height: 14px;
    }
    .avue-crud__tip{
        display: none;
    }
    ::-webkit-scrollbar-thumb:horizontal {
        background-color: #153245;
        border: solid 1px rgba(0, 245, 255, 0.4);
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
    }
    .el-table__fixed-right::before, .el-table__fixed::before, .el-table::before{
        height: 0;
    }
    th.el-table-column--selection {
        .el-checkbox{
            display: none;
        }
    }
}
</style>
